import * as echarts from 'echarts';
import React ,{useEffect}from 'react'
import axios from 'axios'
import './visitor.scss'



export default function Visitor() {
    useEffect(() => {
        var myChart = echarts.init(document.getElementById('cnavans'));
        console.log(myChart);
        var option;

            option = {
            title: {
                text: '用户分布',
                // subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 0, name: '北京' },
                    { value: 0, name: '上海' },
                    { value: 0, name: '深圳' },
                    { value: 0, name: '杭州' },
                    { value: 0, name: '其他' }
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };

            option && myChart.setOption(option);
            axios.get('https://elm.cangdu.org/v1/user/city/count').then(res=>{
                console.log(res.data.user_city);
                myChart.setOption({
                    series: [
                        {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: res.data.user_city.beijing, name: '北京' },
                            { value: res.data.user_city.shanghai, name: '上海' },
                            { value: res.data.user_city.shenzhen, name: '深圳' },
                            { value: res.data.user_city.hangzhou, name: '杭州' },
                            { value: res.data.user_city.qita, name: '其他' }
                        ],
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                        }
                    ]
                })
            })
    }, []);
  


    return(
        <div className='visitor' id='visitor'>
            <div id="cnavans">

            </div>
        </div>
    )
}